<template>
  <div style="width: 1280px;float:left;">
    <!--      弹出框-->
    <el-dialog
        title="填写投标用销售订单详情"
        :visible.sync="show"
        width="1420px"
        height="720px"

        :before-close="handleClose"
        center>
      <el-form ref="form" label-width="80px" class="formBox">
        <div style="float: left">
          <div class="infoBox">
            <el-row :gutter="10" class="infoStyle">
              <el-col>
                <div class="grid-content bg-purple" id="smallTitle">投标单信息</div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="infoStyle">
              <el-col :span="8">
                <div class="grid-content bg-purple">投标编号</div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">{{ bidInfo.bid }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="infoStyle">
              <el-col :span="8">
                <div class="grid-content bg-purple">投标名称</div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">{{ bidInfo.bname }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="infoStyle">
              <el-col :span="8">
                <div class="grid-content bg-purple">所需数量</div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">{{ bidInfo.bnum }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="infoStyle">
              <el-col :span="8">
                <div class="grid-content bg-purple">投标开始时间</div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">{{ bidInfo.bstartDate }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="infoStyle">
              <el-col :span="8">
                <div class="grid-content bg-purple">投标结束时间</div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">{{ bidInfo.bendDate }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="infoStyle">
              <el-col :span="8">
                <div class="grid-content bg-purple">投标介绍</div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">{{ bidInfo.binfo }}</div>
              </el-col>
            </el-row>
          </div>
          <div class="infoBox">
            <el-row :gutter="10" class="infoStyle">
              <el-col>
                <div class="grid-content bg-purple" id="smallTitle1">销售订单信息</div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="infoStyle">
              <el-col :span="8">
                <div class="grid-content bg-purple">订单编号</div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">{{ salesOrderVO.id }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="infoStyle">
              <el-col :span="8">
                <div class="grid-content bg-purple">订单生成时间</div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">{{ salesOrderVO.startDate }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="infoStyle">
              <el-col :span="8">
                <div class="grid-content bg-purple">总金额</div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">{{ salesOrderVO.price }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="infoStyle">
              <el-col :span="8">
                <div class="grid-content bg-purple">总数量</div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">{{ salesOrderVO.num }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="float: left">
          <div class="infoBox" style="height: 630px;width: 380px">
            <el-row :gutter="10" class="infoStyle">
              <el-col>
                <div class="grid-content bg-purple" id="smallTitle2">产品表</div>
              </el-col>
            </el-row>
            <el-table
                :data="productData"
                height="550"
                border
                highlight-current-row
                @current-change="handleAndChange"
                style="width: 100%">
              <el-table-column
                  prop="pname"
                  label="产品名称"
                  width="200">
              </el-table-column>
              <el-table-column
                  prop="fkTypeId"
                  label="类型"
                  width="100"
                  :formatter="typeConversion">
              </el-table-column>
              <el-table-column
                  prop="pspec"
                  label="规格"
                  width="198">
              </el-table-column>
            </el-table>
            <!--        分页-->
            <el-pagination
                background
                layout="prev, pager, next"
                :total="productPagePages"
                :page-size="productPageSize"
                :current-page.sync="productPageNo"
                @current-change="productPageChange"
            >
            </el-pagination>
          </div>
        </div>
        <div style="float: left">
          <div class="infoBox">
            <el-row :gutter="10" class="infoStyle">
              <el-col>
                <div class="grid-content bg-purple" id="smallTitle5">产品搜索</div>
              </el-col>
            </el-row>
            <el-form-item label="产品编号">
              <el-col >
                <el-form-item>
                  <el-input placeholder="支持模糊查询" v-model="productForm.productId" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="产品名">
              <el-col >
                <el-form-item>
                  <el-input  placeholder="支持模糊查询" v-model="productForm.productName" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="产品类型">
              <el-col >
                <el-form-item prop="productNum">
                  <el-select v-model="productForm.productType" placeholder="请选择">
                    <el-option
                        v-for="item in typeList"
                        :key="item.tid"
                        :label="item.tname"
                        :value="item.tid">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <div style="float: right">
              <el-button type="primary" @click="getProductList">搜索</el-button>

            </div>
          </div>
          <div class="infoBox">
            <el-row :gutter="10" class="infoStyle">
              <el-col>
                <div class="grid-content bg-purple" id="smallTitle4">参数输入</div>
              </el-col>
            </el-row>
            <div style="margin-left: 10px;margin-bottom: 25px">
              <el-row :gutter="10" class="infoStyle" >
                <el-col :span="6">
                  <div class="grid-content bg-purple">商品编号</div>
                </el-col>
                <el-col :span="18">
                  <div class="grid-content bg-purple">{{ saleProductForWeb.fkProduct }}</div>
                </el-col>
              </el-row>
            </div>
            <div style="margin-left: 10px;margin-bottom: 25px">
              <el-row :gutter="10" class="infoStyle">
                <el-col :span="6">
                  <div class="grid-content bg-purple">商品名</div>
                </el-col>
                <el-col :span="18">
                  <div class="grid-content bg-purple">{{ prName }}</div>
                </el-col>
              </el-row>
            </div>

            <el-form-item label="产品单价">
              <el-col >
                <el-form-item>
                  <el-input type="number" v-model.number="saleProductForWeb.productPrice"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="产品数量">
              <el-col >
                <el-form-item>
                  <el-input type="number" v-model.number="saleProductForWeb.productNum"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <div style="float: right">
              <el-button type="primary" @click="saveToSaleProductList">添加</el-button>

            </div>
          </div>
        </div>

        <div style="float: left">
          <div class="infoBox" style="height: 630px;width: 380px">
            <el-row :gutter="10" class="infoStyle">
              <el-col>
                <div class="grid-content bg-purple" id="smallTitle3">参与投标产品表</div>
              </el-col>
            </el-row>
            <el-table
                :data="salesOrderVO.saleProductForWebList"
                :row-class-name="tableRowClassName"
                height="250"
                border
                style="width: 100%">
              <el-table-column
                  prop="fkProduct"
                  label="产品编号"
                  width="200">
              </el-table-column>
              <el-table-column
                  prop="productNum"
                  label="产品数量"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="productPrice"
                  label="产品单价"
                  width="100">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="删除"
                  width="50">
                <template slot-scope="scope">
                  <el-button @click="deleteSaleProduct(scope.row)" type="text" icon="el-icon-close"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

      </el-form>
      <div style="margin-bottom: 20px">
        <el-button type="primary" size="medium" style="float: right;margin-left: 10px" @click="breakPage">取消
        </el-button>
        <el-button type="primary" size="medium" style="float: right;margin-left: 10px" @click="submissionOfBids">保存并提交
        </el-button>
        <el-button type="primary" size="medium" style="float: right;margin-left: 10px" @click="saveOrder">暂存</el-button>
      </div>
    </el-dialog>

          <div style="width: 1300px;height:60px;float: left">
            <el-form ref="form" :model="search" label-width="100px">
              <el-form-item label="投标单号" class="searchBox" >
                <el-input placeholder="支持模糊搜索" clearable v-model="search.bidId" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="投标开始时间" class="searchBox">
                <el-date-picker
                    v-model="search.date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="投标状态" class="searchBox">
                <el-select v-model="search.state" placeholder="请选择">
                  <el-option
                      v-for="item in stateList"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button type="primary" @click="init"  class="searchBox" size="medium">搜索</el-button>
              <el-button type="primary" @click="searchRreset"  class="searchBox" size="medium">重置</el-button>
            </el-form>
          </div>


          <div style="width: 100%;float: left;">
            <!--        表格-->`
            <el-table
                ref="singleTable"
                :data="tableData"
                style="width: 100%">
              <el-table-column
                  property="bid"
                  label="投标编号"
                  width="150">
              </el-table-column>
              <el-table-column
                  property="bname"
                  label="投标名称"
                  width="150">
              </el-table-column>
              <el-table-column
                  property="binfo"
                  label="投标详情"
                  width="150">
              </el-table-column>
              <el-table-column
                  prop="bstate"
                  label="投标状态"
                  width="150">
                <template slot-scope="scope">
                  <p v-if="scope.row.bstate === 0">未投标</p>
                  <p v-if="scope.row.bstate === 1">已投标</p>
                  <p v-if="scope.row.bstate === 2">已中标</p>
                  <p v-if="scope.row.bstate === 3">未中标</p>
                  <p v-if="scope.row.bstate === 4">准备投标</p>
                </template>
              </el-table-column>
              <el-table-column
                  property="bstartDate"
                  label="开始时间"
                  width="150">
              </el-table-column>
              <el-table-column
                  property="bendDate"
                  label="截至日期"
                  width="150">
              </el-table-column>
              <el-table-column
                  property="bbidDate"
                  label="投标时间"
                  width="150">
              </el-table-column>
              <el-table-column
                  property="bresultDate"
                  label="中标时间"
                  width="150">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                <template slot-scope="scope">
                  <el-popconfirm v-if="scope.row.bstate === 0"
                                 title="确定要投标么？"
                                 @confirm="bid(scope.row)"
                  >
                    <el-button slot="reference">投标</el-button>
                  </el-popconfirm>
                  <el-button slot="reference" size="small" v-if="scope.row.bstate === 4" @click="bidDetails(scope.row)">
                    填写投标信息
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--        分页-->
            <el-pagination
                background
                layout="prev, pager, next"
                :total="pages"
                :page-size="pageSize"
                :current-page.sync="pageNo"
                @current-change="handleCurrentChange"
                style="margin-top: 20px"
            >
            </el-pagination>
          </div>

  </div>
</template>

<script>
import Navigation from "@/components/Navigation";
import HeaderMenu from "@/components/HeaderMenu";

export default {

  name: "biding",
  data() {
    return {
      //弹出框
      show: false,
      salesOrderVO: {
        id: '',
        num: 0,
        //销售商品表
        fkSupplierId: '',
        state: 0,
        price: 0.0,
        fkBiddingId: '',
        startDate: '',
        saleProductForWebList:[],
      },
      //商品列表
      productData: [],
      productPageNo:1,
      productPageSize:10,
      productPagePages:0,
      //产品搜索
      productForm:{
        productId:'',
        productName:'',
        productType:'',
      },
      //产品单价
      prName:'',
      saleProductForWeb:{
        fkOrderId:'',
        fkProduct:'',
        productNum:'',
        productPrice:'',
        saleProductId:'',
        state:'',
      },
      bidInfo: {
        bname: '',
        binfo: '',
        bstartDate: '',
        bendDate: '',
        bnum: '',
        bid: '',
      },
      //投标搜索
      search: {
        bidId: '',
        date:[],
        state: '',
      },
      //投标搜索状态码表
      stateList:[
        {
          key:0,
          value:'投标中'
        },
        {
          key:1,
          value:'已投标'
        },
        {
          key:2,
          value:'已中标'
        },
        {
          key:3,
          value:'未中标'
        },
        {
          key:4,
          value:'准备投标'
        },
      ],
      //表格
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      pages: 0,
      //类型表
      typeList: [],
      supplierId:'',


    }
  },
  mounted() {
    if(this.enterByMessage()){
      this.init();
    }

  },
  methods: {
    //查询是否是点击消息中心进入
    enterByMessage(){
      let temp = this.$route.params.orderId
      if(temp != null){
        this.search.bidId = temp
      }
      return true;
    },
    //初始化表格
    init() {
      this.supplierId = localStorage.supplierId

      if (this.supplierId != null && 'undefined' !== this.supplierId){
        console.log(this.supplierId)
        let fm = new FormData
        fm.append("supplierId", this.supplierId)//测试用
        fm.append("bidId", this.search.bidId)
        fm.append("startDate", this.search.date[0])
        fm.append("endDate", this.search.date[1])
        fm.append("state", this.search.state)
        fm.append("pageNo", this.pageNo)
        fm.append("pageSize", this.pageSize)
        this.$axios.post("/api/bidding-info/getList", fm).then(
            r => {
              let result = r.data
              if (result.code === 0) {
                this.tableData = result.data.records
                this.pages = result.data.total
              }
            }
        )
      }

    },
    //投标按钮
    bid(row) {
      let fm = new FormData
      fm.append("supplierId", this.supplierId)//测试用
      fm.append("biddingInfoId", row.bid)
      this.$axios.post("/api/bidding-info/bid", fm).then(
          r => {
            let result = r.data
            if (result.code === 0) {
              this.init()
            }
          }
      )
    },
    //翻页
    handleCurrentChange() {
      this.init()
    },
    //打开填写投标详情窗口
    bidDetails(row) {
      let fm = new FormData
      fm.append("supplierId", this.supplierId)//测试用
      fm.append("biddingInfoId", row.bid)
      this.$axios.post("/api/bidding-info/orderInfo", fm).then(
          r => {
            let result = r.data
            if (result.code === 0) {
              this.generateData(result.data)
              this.supplierId= result.data.fkSupplierId;//测试用
            }
          }
      )
      this.bidInfo.bname = row.bname
      this.bidInfo.binfo = row.binfo
      this.bidInfo.bstartDate = row.bstartDate
      this.bidInfo.bendDate = row.bendDate
      this.bidInfo.bnum = row.bnum
      this.bidInfo.bid = row.bid
      this.getTypeList();
      this.getProductList();
      this.show = true
    },
    //生成给后端的数据
    generateData(data){
      if (data.saleProductForWebList == null || data.saleProductForWebList.length === 0 ){
        this.salesOrderVO.saleProductForWebList = [];
      }else {
        this.salesOrderVO.saleProductForWebList = data.saleProductForWebList;
      }
      this.salesOrderVO.id=data.id
      this.salesOrderVO.num=data.num
      this.salesOrderVO.fkSupplierId=data.fkSupplierId
      this.salesOrderVO.state=data.state
      this.salesOrderVO.price=data.price
      this.salesOrderVO.fkBiddingId=data.fkBiddingId
      this.salesOrderVO.startDate=data.startDate
      console.log(this.salesOrderVO)

    },
    //关闭弹出框
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.saveOrder();
          })
          // eslint-disable-next-line @typescript-eslint/no-empty-function
          .catch(_ => {
          });
    },
    //保存订单
    saveOrder() {
      let salesOrderVO = this.salesOrderVO
      this.$axios.post("/api/bidding-info/saveOrder", salesOrderVO).then(
          r => {
            let result = r.data
            if (result.code === 0) {
                this.$message.success("保存成功")
                this.breakPage()
            }else {
              this.$message.error(result.message)
            }
          }
      )
    },
    breakPage(){
      this.show = false;
      this.init()
    },
    //保存并提交
    submissionOfBids() {
      let salesOrderVO = this.salesOrderVO
      this.$axios.post("/api/bidding-info/submissionOfBids", salesOrderVO).then(
          r => {
            let result = r.data
            if (result.code === 0) {
              this.$message.success("投标成功")
              this.breakPage()
            }else {
              this.$message.error(result.message)
            }
          }
      )
      console.log("baocun ")
    },

    //类型转换
    typeConversion(row, column) {
      this.getTypeList();
      for (let i = 0; i <this.typeList.length; i++) {
          if (row.fkTypeId === this.typeList[i].tid){
            return this.typeList[i].tname
          }
      }
    },
    //获得类型表
    getTypeList() {
      if (this.typeList.length === 0) {
        this.$axios.get("/api/bid-product/typeList").then(
            r => {
              let result = r.data
              if (result.code === 0) {
                this.typeList = result.data
              }
            }
        )
      }
    },
    //获取产品表
    getProductList(){
      let fm = new FormData
      fm.append("supplierId",this.supplierId)
      fm.append("productId",this.productForm.productId)
      fm.append("productName",this.productForm.productName)
      fm.append("productType",this.productForm.productType)
      fm.append("pageSize",this.productPageSize)
      fm.append("pageNo",this.productPageNo)
      this.$axios.post("/api/bid-product/productList",fm).then(
          r => {
            let result = r.data
            if (result.code === 0) {
              this.productData = result.data.records
              this.productPagePages = result.data.total
              console.log(result.data.records)
            }
          }
      )
    },
    //点击产品表
    handleAndChange(row){
      this.cleanSaleInput();
      this.saleProductForWeb.fkProduct =row.pid
      this.prName = row.pname
    },
    //产品表翻页
    productPageChange(){
      this.getProductList();
    },
    //删除销售产品
    deleteSaleProduct(row){

      let temp = this.salesOrderVO.saleProductForWebList[row.row_index]
      console.log(temp)
      this.salesOrderVO.price -= temp.productNum*temp.productPrice
      this.salesOrderVO.num -= temp.productNum
      this.salesOrderVO.saleProductForWebList.splice(row.row_index,1)
    },
    //清除销售参数输入
    cleanSaleInput(){
      this.saleProductForWeb.productNum = ''
      this.saleProductForWeb.productPrice = ''
    },
    //保存销售参数输入
    saveToSaleProductList(){

      if (this.saleProductForWeb.fkProduct === ''){
        this.$message.error("请选择产品在添加")
        return
      }
      if(this.saleProductForWeb.productNum <= 0 || this.saleProductForWeb.productPrice <= 0){
        this.$message.error("参数填写错误")
        return
      }
      let saleProductForWeb = this.saleProductForWeb
      if (this.salesOrderVO.saleProductForWebList === null || this.salesOrderVO.saleProductForWebList.length === 0){
        let saleProductForWebList = [];
        saleProductForWebList.push(Object.assign({},saleProductForWeb))
        this.salesOrderVO.saleProductForWebList = saleProductForWebList;
      }else {
        this.salesOrderVO.saleProductForWebList.push(Object.assign({},saleProductForWeb))
      }
      let allPrice = this.saleProductForWeb.productPrice*this.saleProductForWeb.productNum;
      this.salesOrderVO.price+=allPrice
      let allNum = this.saleProductForWeb.productNum;
      this.salesOrderVO.num+=allNum
      console.log(this.salesOrderVO)
    },
    //保存产品下标
    tableRowClassName({row, rowIndex}) {
      row.row_index = rowIndex;
    },
    //重置搜索
    searchRreset(){
      this.search.bidId = ''
      this.search.state = ''
      this.search.date = []
      this.init()
    }
  }

}
</script>

<style scoped>
.formBox {
  width: 1420px;
  height: 700px
}

.infoBox {
  margin: 10px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  width: 235px;
  height: 300px;
}

.infoStyle {
  margin-top: 10px;
  margin-bottom: 10px;
}

#smallTitle1, #smallTitle ,#smallTitle2,#smallTitle3,#smallTitle4,#smallTitle5{
  text-align: center;
  font-size: 20px;
}
.searchBox{
  float: left;
  margin-right: 20px;
}
</style>